{{Template:SZPT-CHINA/head}}
<html>

<head>

</head>

<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">


<script>
    $(document).ready(function() {
        //加载适配
        init();

    });

    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function() {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function() {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();


        setTimeout(function() {

            document.body.append(document.getElementById('head'))

        }, 10);




        //


    }
</script>

<script>
</script>

<body class="pc" id="main">


    <div style="text-align: center;width: 1900px;margin-top: 200px;">
        <div style="font-size: 100px;margin-left: -900px;">| Awards</div>
        <div>
            <!-- <img class="toppic" src="https://2019.igem.org/wiki/images/e/ea/T--NCKU_Tainan--Awards_best.png"> -->
            <div class="yjj">Medal</div>
            <div>
                <img class="pic" src="https://2021.igem.org/wiki/images/9/9d/T--SZPT-CHINA--award-1.png">
                <div class="ejj">Gold medal</div>
            </div>
        </div>
        <hr class="hrr">
        <div>
            <!-- <img class="toppic" src="https://2019.igem.org/wiki/images/e/ea/T--NCKU_Tainan--Awards_best.png"> -->
            <div class="yjj">Awards</div>
            <div style="display: flex;">
                <div style="margin-left: 319px;">
                    <img class="pic" src="https://2021.igem.org/wiki/images/4/4b/T--SZPT-CHINA--award-2.png" style="margin-top: 317px;width: 501px;">
                    <div class="ejj">Best Therapeutics Project</div>

                </div>
                <div style="margin-left:400px">
                    <img class="pic" src="https://2021.igem.org/wiki/images/6/6d/T--SZPT-CHINA--award-4.png">
                    <div class="ejj">Best Best Presentation</div>

                </div>
            </div>
        </div>
        <hr class="hrr">
        <div>
            <!-- <img class="toppic" src="https://2019.igem.org/wiki/images/e/e7/T--NCKU_Tainan--Awards_nomination.png"> -->
            <div class="yjj">Nominations</div>
            <div>
                <img class="pic" src="https://2021.igem.org/wiki/images/f/f8/T--SZPT-CHINA--award-3.png">
                <div class="ejj">Best Education</div>
            </div>
        </div>
    </div>
    <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic" style="margin-top: 200px;width: 1920px;"></image>

</body>
<style>
    .yjj {
        font-weight: 900;
        font-size: 80px;
        margin-top: 150px;
    }
    
    .ejj {
        font-weight: 900;
        font-size: 40px;
        margin-top: 90px;
    }
    
    .pic {
        margin-top: 200px;
        width: 250px;
    }
    
    .toppic {
        margin-top: 200px;
        width: 250px;
    }
    
    .hrr {
        margin-top: 150px;
    }
</style>

<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
            //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function() {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');




            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
            // 是移动设备 展示移动设备页
            //document.getElementById('main').style = 'display:none'
            //document.getElementsByClassName('mobile')[0].style = 'display:flex'
            // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function() {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>